<template>
  <div>
    <el-button  class="add-enemy-pet" type="success" @click="add">添加敌人</el-button>
    <el-table border :data="enemy_list" stripe :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column prop="pet_name" label="敌人名">
        </el-table-column>
        <el-table-column prop="degree" label="阶段">
        </el-table-column>
        <el-table-column prop="hp" label="hp">
        </el-table-column>
        <el-table-column prop="atk" label="atk">
        </el-table-column>
        <el-table-column prop="sp" label="sp">
        </el-table-column>
        <el-table-column prop="default_lv" label="lv">
        </el-table-column>
        <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="removeEnemy(scope.row)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
   
    <common-modal v-show="is_show" v-on:closeme="closeAdd" v-on:confirm="confirmAdd">
            <h3 slot="header-title">新增敌人</h3>
            <div class="select-box" slot="body">
                <div v-for="(item,i) in pet_template_list" :key="i">
                    <el-radio v-model="pet_template_id" :label="item._id">{{item.pet_name}}</el-radio>
                </div>                                      
            </div>
    </common-modal>

  </div>
</template>

<script>
  import commonModal from '../../components/commonModal.vue'
  export default{
    components:{
        'common-modal':commonModal
    },      
      data(){
          return {
              enemy_list:[],
              pet_template_list:[],
              pet_template_id:"",
              money:0,
              is_show:false,
          }
      },
      mounted:function(){
        this.getEnemies()
      },
      methods:{
          removeEnemy(row){
            this.$confirm('此操作将永久删除该在售宠物, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //在这里调用删除接口
                this.$ajax({
                    method: 'post',
                    url: 'remove_enemy',
                    data: {
                    "_id":row.enemy_id
                    }
                }).
                then(res => {
                    this.getEnemies()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });               
                }); 
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });                  
          },
          getPetTemplates(){
            this.$ajax({
                method: 'get',
                url: 'get_all_pet_templates',

            }).
            then(res => {
                this.pet_template_list=res.data.res_msg
            });               
          },
          add(row){
              this.getPetTemplates()
              this.pet_template_id=""
              this.is_show=true;
          },
          getEnemies(){
            this.$ajax({
                method: 'get',
                url: 'get_enemies',

            }).
            then(res => {
                console.log(res)
                this.enemy_list=res.data.res_msg

            });               
          },
          closeAdd(){
              this.is_show=false;
          },

          confirmAdd(){
              //这里调接口
              this.is_show=false;
              let msg={
                  "pet_template_id":this.pet_template_id,
              }
              console.log(msg)
            this.$ajax({
                method: 'post',
                url: 'add_enemy',
                data: msg
            }).
            then(res => {
                this.getEnemies()
                this.$message.success("新增成功！");
                
            });                
              
          },
      },
  }
</script>


<style lang="scss" scoped>
    .add-enemy-pet{
        margin: 0 0 2% 0 ;
    }
    .page{
        margin-top: 1%;
        margin-left: 75%;
        margin-left: 80%;
    }
    .select-box{
        margin-top: 3%;
        width: 100%;
        height: 300px;
        overflow-y: scroll;
    }
</style>
